<template>
  <!-- <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :style="{ width: isCollapse ? '4rem' : '160px' }" -->
  <el-menu
    :default-active="`/${$route.path.split('/')[1]}`"
    class="el-menu-vertical-demo"
    :style="{ width: isCollapse ? '4rem' : '160px' }"
    :collapse="isCollapse"
    router
    @select="selectMenu"
  >
    <!-- background-color="transparent" -->
    <div class="logo">
      <!-- <img v-if="isCollapse" src="@/assets/img/apple-touch-icon.png" />
      <div v-else class="img"></div>-->

      <img v-if="isCollapse" src="@/assets/img/apple-touch-icon.png" />
      <template v-else>
        <!-- <img src="@/assets/img/apple-touch-icon.png" style="width: 24px;" /> -->
        <!-- 对抗蜂群无人机作战能力仿真评估系统 -->
        <!-- 面向导弹攻防体系的智能体分布式计算子系统 -->
        <!-- 面向导弹攻防体系的智能体训练评估子系统 -->
        <span
          style="display: flex;flex-direction: column;padding-right: 10px"
          v-if="app_user=='gamma'"
        >
          <!-- <p>面向导弹攻防</p>
          <p>体系的智能体分布式计算子系统</p>-->
          <p>面向体系的</p>
          <p>智能体分布式</p>
          <p>计算子系统</p>
        </span>
        <span
          style="display: flex;flex-direction: column;padding-right: 10px"
          v-if="app_user=='delta'"
        >
          <!-- <p>面向导弹攻防</p>
          <p>体系的智能体分布式计算子系统</p>-->
          <p>面向体系的</p>
          <p>智能体训练</p>
          <p>评估子系统</p>
        </span>
      </template>
    </div>
    <!-- <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
      <i :class="['menu-icon', `menu-${item.meta.icon}`]"
        :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }" />
      <span slot="title" style="color: #fff;">{{ item.meta.title }}</span>
    </el-menu-item>-->

    <template v-for="item in list">
      <template v-if="item.meta.routes">
        <el-submenu :index="item.path" :key="item.path">
          <template slot="title">
            <i
              :class="[
								'menu-icon',
								{
									// [`menu-${item.meta.icon}-active`]: item.path === '/' ? ($route.path === item.path) : $route.path.includes(item.path)
								},
							]"
              :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }"
            />
            <span slot="title"></span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="route.path"
              v-for="route in item.meta.routes"
              :key="route.path"
              :class="route.path === $route.path ? 'is-active' : ''"
            >
              <i
                :class="[
									'menu-icon',
									`menu-${route.meta.icon || item.meta.icon}`,
									{
										// [`menu-${item.meta.icon || item.meta.icon}-active`]: item.path === '/' ? ($route.path === item.path) : $route.path.includes(item.path)
									},
								]"
                :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }"
              />
              {{ route.meta.title }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </template>

      <el-menu-item :index="item.path" :key="item.path" v-else>
        <i
          :class="[
						'menu-icon',
						`menu-${item.meta.icon}`,
						{
							// [`menu-${item.meta.icon || item.meta.icon}-active`]: item.path === '/' ? ($route.path === item.path) : $route.path.includes(item.path)
						},
					]"
          :style="{ width: isCollapse ? '30px' : '24px', height: isCollapse ? '30px' : '24px' }"
        />
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>

    <!-- <el-submenu :index="item.path" v-for="item in list" :key="item.path">
      <template slot="title">
        <i :class="['menu-icon', `menu-${item.meta.icon}`]" />
        <span slot="title" style="color: #fff;">{{ item.meta.title }}</span>
      </template>
    </el-submenu>-->

    <!-- <el-menu-item :index="item.path" v-for="item in list" :key="item.path">
      <i :class="['menu-icon', `menu-${item.meta.icon}`]" />
      <span slot="title" style="color: #fff;">{{ item.meta.title }}</span>
    </el-menu-item>-->

    <div class="btn-collapse" @click="updateIsCollapse()"></div>
  </el-menu>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  props: ["list"],
  data() {
    return {
      app_user: process.env.VUE_APP_VERSIONS
    };
  },
  methods: {
    ...mapActions(["updateIsCollapse", "updatePageNum", "updateSearch"]),
    selectMenu(e) {
      if (e.split("/")[1] !== this.$route.path.split("/")[1]) {
        this.updatePageNum(1);
        this.updateSearch("");
      }
    }
  },
  computed: mapState({
    breadcrumb: state => state.menuStore.breadcrumb,
    isCollapse: state => state.menuStore.isCollapse
  }),
  mounted() {
    console.log("process.env.VUE_APP_USER", this.app_user);
  }
};
</script>

<style lang="less" scoped>
.logo {
  // padding: 15px 20px 15px;
  padding: 15px 0 15px;

  .img {
    width: 100%;
    height: 24px;
    background: url(~@/assets/img/logo.png) no-repeat;
    background-size: 100%;
  }

  img {
    width: 100%;
  }

//   display: flex;
//   align-items: center;

  span {
    // color: #fff;
    // font-size: 18px;
    text-align: center;
    padding-left: 5px;
    letter-spacing: 4px;

    p {
      font-size: 16px;
      line-height: 1.5em;
    }
  }
}

.el-menu-vertical-demo {
  height: 100%;
  background: #eee;
  box-shadow: -1px 0 10px rgba(#000, 0.2);
  // box-shadow: inset -1px 0 10px rgba(#000, .1);
  border: 0px;
  // color: #333;
  position: relative;
  transition: width 0.1s;
  overflow: auto;

  .el-menu-item-group {
    background: #eee;
    overflow: hidden;
  }

  // * {
  //   color: #333 !important;
  // }

  i {
    transition: all 0.1s;
    // width: 5rem;
  }

  span {
    margin-left: 10px;
  }
}


.el-menu-vertical-demo::-webkit-scrollbar{
  display: none
}

.el-menu--collapse {
  .el-menu-item * {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 13px;
  }
}

.btn-collapse {
  position: absolute;
  top: 23px;
  right: -35px;
  cursor: pointer;
  width: 14px;
  height: 12px;
  transform: scale(1.2);
  // background: #606266;
  // mask-repeat: no-repeat;
  // mask-size: 25px;
  // mask-position: center;
  // mask-image: url(~@/assets/img/piston.png);
  background: url(~@/assets/img/piston.png);
  background-size: 100% 100%;
}

.menu-icon {
  // position: absolute;
  // cursor: pointer;
  // width: 3.75rem;
  // height: 3.75rem;
  // width: 100%;
  // height: 100%;
  display: inline-block;
  margin: 0 auto;
  // mask-repeat: no-repeat;
  // mask-size: 1.875rem 1.875rem;
  // mask-position: center;
  // padding: .3125rem;
  // margin-top: 30px;
  // transform: scale(1.8);

  // & {
  //   content: '';
  //   display: block;
  //   // position: absolute;
  //   // width: 3.6rem;
  //   // height: 3.6rem;
  //   border: 1px solid;
  //   // line-height: 56px;
  //   // background: #606266;
  //   // mask-repeat: no-repeat;
  //   // mask-size: 1.75rem;
  //   // mask-position: center;
  // }
}

.el-menu {
  z-index: 999;
  height: 100vh;
  // .menuitem {
  //   span {
  //     color: #333;
  //   }
  // }

  .is-active {
    background: #409eff;

    * {
      color: #fff !important;
    }
  }
}

// /deep/.el-tooltip {
//   padding: 0 !important;
//   color: #fff;
// }
</style>
